<template>
  <div>
    <div class="box1">
      <p>{{pca.data.times}}</p>
      <!-- {{pca.data.list}} -->
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio2" size="medium">
          <el-radio-button @click.native="changet" label="国内各地区疫情表格统计汇总"></el-radio-button>
          <el-radio-button @click.native="changef" label="全球疫情表格统计汇总"></el-radio-button>
        </el-radio-group>
        <br />
        <el-radio-group v-model="radio1" size="medium1">
          <el-radio-button @click.native="changet2" label="表格"></el-radio-button>
          <el-radio-button @click.native="changef2" label="饼图"></el-radio-button>
        </el-radio-group>
      </div>

      <el-divider></el-divider>
      <div v-if="(flag==1&&flag1==9)">
        <div>
          <el-table
            align="center"
            :data="guonei"
            style="width: 100%"
            row-class-name="tableRowClassName"
            :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column type="expand" align="center">
              <template scope="scope" class="tt">
                <!-- {{scope}} -->
                <div class="table2">
                  <el-table :data="scope.row.city" style="width: 100%" align="center">
                    <el-table-column prop="name" align="center"></el-table-column>
                    <el-table-column prop="susNum" align="center"></el-table-column>
                    <el-table-column prop="econNum" align="center"></el-table-column>
                    <el-table-column prop="conNum" align="center"></el-table-column>
                    <el-table-column prop="cureNum" align="center"></el-table-column>
                    <el-table-column prop="deathNum" align="center"></el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              type="success-row"
              class="fist"
              prop="name"
              label="疫情地区"
              align="center"
            ></el-table-column>

            <el-table-column prop="susNum" label="新增" align="center" sortable></el-table-column>
            <el-table-column
              prop="econNum"
              label="现有"
              align="center"
              :sortable="true"
              :sort-method="sortByDate2"
            ></el-table-column>
            <el-table-column
              prop="value"
              label="累计"
              align="center"
              :sortable="true"
              :sort-method="sortByDate3"
            ></el-table-column>
            <el-table-column
              prop="cureNum"
              label="治愈"
              align="center"
              :sortable="true"
              :sort-method="sortByDate4"
            ></el-table-column>
            <el-table-column
              prop="deathNum"
              label="死亡"
              align="center"
              :sortable="true"
              :sort-method="sortByDate5"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else-if="(flag==0&&flag1==9)">
        <div>
          <div class="top">
            <!-- 筛选 -->
            <div class="screen">
              <div style="width:30% ">请输入国家：</div>
              <el-input
                type="search"
                v-model="search"
                style="width:70% float:right"
                placeholder="请输入关键字"
              ></el-input>
            </div>
          </div>
          <!-- 表格 -->
          <div>
            <div class="box1">
              <el-table
                align="center"
                :data="tables"
                style="width: 100%"
                row-class-name="tableRowClassName"
                :default-sort="{prop: 'date', order: 'descending'}"
              >
                <el-table-column label="疫情地区" align="center">
                  <template slot-scope="scope">
                    <span class="col-cont" v-html=" showDate( scope. row. name) "></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="现有"
                  align="center"
                  :sortable="true"
                  :sort-method="sortByDate21"
                >
                  <template slot-scope="scope">
                    <span class="col-cont" v-html=" showDate( scope. row. econNum)"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="累计"
                  align="center"
                  :sortable="true"
                  :sort-method="sortByDate31"
                >
                  <template slot-scope="scope">
                    <span class="col-cont" v-html=" showDate( scope. row. value)"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="治愈"
                  align="center"
                  :sortable="true"
                  :sort-method="sortByDate41"
                >
                  <template slot-scope="scope">
                    <span class="col-cont" v-html=" showDate( scope. row. cureNum)"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="死亡"
                  align="center"
                  :sortable="true"
                  :sort-method="sortByDate51"
                >
                  <template slot-scope="scope">
                    <span class="col-cont" v-html=" showDate( scope. row. deathNum)"></span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="(flag==1&&flag1==8)">
        <el-radio-group :v-model="radio3" size="medium3">
          <el-button @click="o" label="全国">全国</el-button>
          <el-button @click="a" label="地区新增">地区新增</el-button>
          <el-button @click="b" label="地区现有">地区现有</el-button>
          <el-button @click="c" label="地区治愈">地区治愈</el-button>
          <el-button @click="d" label="地区累计">地区累计</el-button>
          <el-button @click="e" label="地区死亡">地区死亡</el-button>
        </el-radio-group>
        <div id="con" style="height: 650px"></div>
      </div>

      <div v-else-if="(flag==0&&flag1==8)">
        <div id="con1" style="height: 650px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import pca from "../../assets/404_images/pca2.json";
// import axios from "../../http/axios";

export default {
  data() {
    return {
      radio2: "国内各地区疫情表格统计汇总",
      radio1: "表格",
      id: 0,
      da: [],
      search: "",
      // pca: {}
      pca,
      flag: 1,
      flag1: 9,
      flag2: "o",
      tableData: pca.data.worldlist,
      guonei: pca.data.list,
      num: "",
      radio3: "全国"
    };
  },
  // 组件销毁，也就是离开当前页面
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    // this.find1();
  },
  computed: {
    // 实时监听表格
    tables: function() {
      const search = this.search;
      if (search) {
        return this.tableData.filter(dataNews => {
          return Object.keys(dataNews).some(key => {
            return (
              String(dataNews[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return this.tableData;
    }
  },
  methods: {
    findData() {
      this.da = [];

      if (
        (this.flag1 == 9 && this.flag == 1) ||
        (this.flag1 == 9 && this.flag == 0) ||
        (this.flag1 == 8 && this.flag == 1 && this.flag2 != true)
      ) {
        this.guonei.map((item, index) => {
          console.log(item);
          console.log(index);
          let abc = {};
          abc.name = item.name;
          abc.value = item[this.num];
          console.log(abc);
          this.da.push(abc);
        });

        console.log(this.da);
        this.id = setTimeout(() => {
          this.initEchart();
        }, 1000);
      }
    },

    find1() {
      axios.defaults.baseURL = "http://localhost:9528";
      axios.get("/test/news/wap/fymap2020_data.d.json").then(res => {
        console.log(res);
        // this.pca=JSON.parse(JSON.stringify(res.data));
        // this.pac=res.data;
        // console.log(res.data);
        // console.log(this.pca);
      });
    },

    changet() {
      this.flag = 1;
      this.findData();
    },
    changef() {
      this.flag = 0;
    },
    changet2() {
      this.flag1 = 9;
    },
    changef2() {
      this.flag1 = 8;
      // if (flag==1&&flag1==8) {
      //    this.findData();
      // }
      this.o();
    },
    sortByDate5(obj1, obj2) {
      let val1 = obj1.deathNum;
      let val2 = obj2.deathNum;
      return val1 - val2;
    },
    sortByDate4(obj1, obj2) {
      let val1 = obj1.cureNum;
      let val2 = obj2.cureNum;
      return val1 - val2;
    },
    sortByDate3(obj1, obj2) {
      let val1 = obj1.value;
      let val2 = obj2.value;
      return val1 - val2;
    },
    sortByDate2(obj1, obj2) {
      let val1 = obj1.econNum;
      let val2 = obj2.econNum;
      return val1 - val2;
    },
    sortByDate51(obj1, obj2) {
      let val1 = obj1.deathNum;
      let val2 = obj2.deathNum;
      return val1 - val2;
    },
    sortByDate41(obj1, obj2) {
      let val1 = obj1.cureNum;
      let val2 = obj2.cureNum;
      return val1 - val2;
    },
    sortByDate31(obj1, obj2) {
      let val1 = obj1.value;
      let val2 = obj2.value;
      return val1 - val2;
    },
    sortByDate21(obj1, obj2) {
      let val1 = obj1.econNum;
      let val2 = obj2.econNum;
      return val1 - val2;
    },
    o() {
      this.da = [];

      console.log(this.num);
      var item1 = ["累计确诊", "累计死亡", "累计治愈", "现有确诊", "累计治愈"];
      var item2 = [
        pca.data.gntotal,
        pca.data.deathtotal,
        pca.data.gntotal,
        pca.data.econNum,
        pca.data.curetotal
      ];
      for (var i = 0; i < 5; i++) {
        let abc = {};
        abc.name = item1[i];
        abc.value = item2[i];
        this.da.push(abc);
      }
      this.id = setTimeout(() => {
        this.initEchart();
      }, 1000);
    },
    a() {
      this.num = "susNum";
      this.findData();
    },
    b() {
      this.num = "econNum";
      this.findData();
    },
    c() {
      this.num = "value";
      this.findData();
    },
    d() {
      this.num = "cureNum";
      this.findData();
    },

    e() {
      this.num = "deathNum";
      this.findData();
    },

    showDate(val) {
      val = val + "";
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#409EFF">' + this.search + "</font>"
        );
      } else {
        return val;
      }
    },
    // 初始化图表
    initEchart(res1, res2) {
      // 销毁图表
      echarts.init(document.getElementById("con")).dispose();

      // 初始化图表
      var myChart = echarts.init(document.getElementById("con"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "全国疫情分布",
          // subtext: "纯属虚构",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.da
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.da,

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    showDate2(val) {
      val = val + "";
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#409EFF">' + this.search + "</font>"
        );
      } else {
        return val;
      }
    },
    // 初始化图表
    initEchart2(res1, res2) {
      // 销毁图表
      echarts.init(document.getElementById("con")).dispose();

      // 初始化图表
      var myChart = echarts.init(document.getElementById("con"));

      // 指定图表的配置项和数据
      option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "2015", "2016", "2017"],
          source: [
            {
              product: "Matcha Latte",
              "2015": 43.3,
              "2016": 85.8,
              "2017": 93.7
            },
            { product: "Milk Tea", "2015": 83.1, "2016": 73.4, "2017": 55.1 },
            {
              product: "Cheese Cocoa",
              "2015": 86.4,
              "2016": 65.2,
              "2017": 82.5
            },
            {
              product: "Walnut Brownie",
              "2015": 72.4,
              "2016": 53.9,
              "2017": 39.1
            }
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
span {
  text-align: center;
  margin: 0 auto;
}
.el-table >>> .tableRowClassName {
  background: #f0f9eb;
}
.el-table >>> td {
  padding: 0;
  /* color: aqua; */
}
.table2 {
  /* background: rebeccapurple; */

  padding: 0px 0px 0px 50px;
}
.table2 .el-table >>> th {
  display: inline-block;
  height: 0;
  width: 0;
  background-color: transparent;
}
</style>


<style scoped>
span {
  text-align: center;
  margin: 0 auto;
}
.el-table >>> .tableRowClassName {
  background: #f0f9eb;
}
.el-table >>> td {
  padding: 0;
  /* color: aqua; */
}
.table2 {
  /* background: rebeccapurple; */

  padding: 0px 0px 0px 50px;
}
.table2 .el-table >>> th {
  display: inline-block;
  height: 0;
  width: 0;
  background-color: transparent;
}
</style>